<#include '/admin/header.html' >
<style>
	table{
		line-height:47px;
	}
	td input{
		height: 25px;
	}
	tr td{
		padding-right: 25px;
		white-space:nowrap;
	}
	.tab li{
		border-bottom: 1px solid #ccc;
        margin-right: 0px;
        padding: 0px 10px;
	}
	
	.chart{height:400px;}

label.legend{display:inline-block;font-weight: normal;margin-right: 5px;font-size: 12px;cursor: pointer;}
label.legend.disabled{color: #d3d3d3 !important;}
label.legend.disabled .label{background-color: #d3d3d3 !important;}
label.legend .label{width: 12px;height: 8px;margin-right: 5px;vertical-align: middle;margin-bottom: 2px;}
label.legend .label:empty{display: inline-block;}
</style>
<div class="admin-main">
  <div class="table_control">
	<div style="display: block;" class="searchAdvanced">
		<input id="Advanced" name="Advanced" type="hidden" value="0" />
		<table width="98%" border="0" cellspacing="0" cellpadding="8">
			<tr style="float: right;line-height: 47px;">
				<td width="100px" align="right" style="padding-left:15px;">按订单状态：</td>
				<td width="200px">
					<select id="status" >
						<option value="99">---所有---</option> 
						<#if statusMap??>
						<#list statusMap?keys as key>
							<#if (key?number)=(order_status?number)>
								<option value="${key}" selected="selected" >${statusMap[key]}</option>
							<#else>
								<option value="${key}">${statusMap[key]}</option>
							</#if>
						</#list>
						</#if>
					</select>
				</td>
				<td width="13%">
					按订单周期：
				</td>
				<td width="10%" class="layui-form-item" >
				<div class="layui-input-block" >
					<select id="cycle_type"  onchange="statistics_mode(this.value)" lay-verify="required">
						<option value="1" <#if cycle_type==1 >selected="selected"  </#if> >按照月统计</option>
						<option value="0" <#if cycle_type==0 >selected="selected"  </#if> >按照年统计</option>
					</select>
				</div>	
				</td>
				<td width="10%" >
					<select id="year">
					</select>
				</td>
				<td width="10%" >
					<select id="month" <#if cycle_type==0 > style="display: none;" </#if>  >
					</select>
				</td>
				<td width="13%" style="text-align: center;">
						<a id="search_statis"  href="javascript:void(0);"	class="layui-btn layui-btn-normal layui-btn-small">开始搜索</a>
				</td>
				<td></td>
			</tr>
		</table>
	</div>
	</div>
	<div class="clear height10"></div>
	
	<div class="input">
		<div style="display: block;" class="goods_input">
			<div class="outcont" style="width: 100%">
				<div class="contentTab">
					<ul class="tab" style="width:1200px;height:40px;">
						<li tabid="1" style="width:5%;" >下单金额</li> 
						<li tabid="2" class="contentTabS" style="width:5%;">下单量</li> 
						<div style="width:65%;height:47px;float:left;border-bottom:1px solid #ccc;"></div>
					</ul>
				</div>
				
			</div>
			<div class="shadowBoxWhite wf100 whiteBox">
				<div class="text">
					<div class="tab-page">
						<div tabid="2"  class="tab-panel">
							<table class="form-table" style="width: 100%;">
								<tr>
									<td>
										<div id="divCharts" style="width:95%;margin:50px auto;">
									</td>
								</tr>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>	
	
	<div class="clear height10"></div>
	
	<div class="shadowBoxWhite tableDiv">
		<table class="layui-table site-table table-hover" id="orderdata">
			<thead>
				<tr>
					<th>订单号</th>
					<th>下单日期</th>
					<th>订单总额</th>
					<th>实付金额</th>
					<th>会员</th>
					<th>订单状态</th>
				</tr>
			</thead>
		</table>
	</div>
	
</div>


<script type="text/javascript">

var divCharts = $('#divCharts');
var divChart = $('<div class="chart"></div>').appendTo(divCharts);
var analyticChart = echarts.init(divChart.get(0));


var last_type=null;
var option;
var myChart;
$(function() {
	


//tab选项卡按钮样式
	
 	$(".tab li").eq(0).css({"border-bottom":"white","border-left":"1px solid #ccc","border-top":"1px solid #ccc","border-right":"1px solid #ccc"})
		$(".tab li").click(function(){
			$this=$(this);
			$this.css({"border-bottom":"white","border-left":"1px solid #ccc","border-top":"1px solid #ccc","border-right":"1px solid #ccc"}).siblings("li").css({"border-top":"white","border-bottom":"1px solid #ccc","border-right":"white","border-left":"white"})
		})


	
	//填充下拉框年月的值
	var currentYear = new Date().getFullYear();
	var historyYear = currentYear-10;
	currentYear = ${year};
	
	var currentmonth = new Date().getMonth();
	currentmonth+=1;
	currentmonth = ${month};
	
	for(var i=0;i<20;i++){	//上下20年
		if(currentYear==historyYear){
			$("#year").append("<option value='"+historyYear+"' selected='selected' >"+historyYear+"年</option>" );
		}else{
			$("#year").append("<option value='"+historyYear+"' >"+historyYear+"年</option>" );
		}
		historyYear++;
	}
	
	for(var i=1;i<=12;i++){	//12个月份
		if(currentmonth==i){
			$("#month").append("<option value='"+i+"' selected='selected' >"+i+"月</option>" );
		}else{
			$("#month").append("<option value='"+i+"' >"+i+"月</option>" );
		}
	}
	
	// tab的选择
	$(".goods_input .contentTab>ul>li").click(function() {
		
		var tabid = $(this).attr("tabid");
		$(".goods_input .contentTab>ul>li").removeClass("contentTabS");
		$(this).addClass("contentTabS");
		$(".tab-page .tab-panel").hide();
		$(".tab-panel[tabid=" + tabid + "]").show();
		
		if(tabid==1){
			saleMoney();
		}else{
			saleNum();
		}
		
	});
	

	$("input[type=text]").attr("autocomplete", "off");
	
	table = $('#orderdata').DataTable({
		"language": {
	        "url": "${staticserver}/media/zh_CN.txt"
	    },
	    "processing": true,
	    "autoWidth": true,
	    "serverSide": true,
	    "initComplete": function(settings, json) {
	    	 $(".dataTables_paginate").on("click", "a", function() {
	    		 if($('#goodsdata_processing')[0].style.display=="block"){
					  $(".dataTables_paginate li").addClass("disabled");
				  }  
	         });   
		 },
	    "ordering": false,
	    "searching": false,
	    "lengthChange": false,
	    ajax: {
	        //指定数据源
	        type:"post",
	        url: '${ctx}/shop/admin/order/list-json.do',
	    },

	    columns: [ //定义列 
	        {data: "sn"},
	        {data: null,"render": function(data, type, row) {
	        	return  formatDate(data.create_time,row,type);
	       	}},
	        {data: "need_pay_money"},
	        {data: "paymoney"},
	        {data: "uname"},
	        {data: null,"render": function(data, type, row) {
	        	return  forStruts(data.status,row,type);
	       	}}
	     ]
	});  
	
	$("#search_statis").click(function(){
		saleNum();
		searchOrder();
	});
	
	//加载数据
   	saleNum();
   	searchOrder();
		
});



//订单状态
function forStruts(value, row, index) {
	var val;
	val = getType(${status_Json!''},value);
	return val;
}

function getType(exMap,value){
	var val;
	$.each(exMap,function(key,values){ 
	    if(value==key){
	    	val=values;
	    }
	});
	return val;
}


/**
 * 搜索订单数据
 */
function searchOrder(){
	
	var status = $("#status :selected").val();
	var cycle_type = $("#cycle_type :selected").val();
	var start_time = $("#year :selected").val()+"-"+$("#month :selected").val()+"-01 00:00:00";
	var end_time = $("#year :selected").val()+"-"+$("#month :selected").val()+"-31 23:59:59";
	
	if (cycle_type == 0) {
		start_time = $("#year").val()+"-01-01 00:00:00";
		end_time = $("#year").val()+"-12-31 23:59:59";
	}else if(cycle_type!=1){
		start_time = null;
		end_time = null;
	}
	var param = "status="+status+"&cycle_type="+cycle_type+"&start_time="+start_time+"&end_time="+end_time;
	var url = table.ajax.url("${ctx}/shop/admin/order/list-json.do?"+param);
	url.load();

}

// 格式化时间
function formatDate(value,row,index){
	if(value==null||value==0){
		return "";
	}
	else{
		return getFormatDateByLong(value, "yyyy-MM-dd");
	}
}

// 按周期隐藏 月份下拉框
function statistics_mode(mode_value){
	if(mode_value==1){
		$("#month").show();
	}else{
		$("#month").hide();
	}
}
function saleNum(status,cycle_type,year,month){
	
	var year = $("#year :selected").val();
	var month = $("#month :selected").val();
	if(year==null){
		year=2015;
		month=4;
	}
	
	var status = $("#status :selected").val();
	var cycle_type = $("#cycle_type :selected").val();
	
	if(cycle_type!=last_type){
		if(cycle_type==1){					//判断按哪个周期显示数据
			numEcharts('月');					
		}else{
			numEcharts('年');
		}
		last_type = cycle_type;
	}
	
	jQuery.getJSON("${ctx}/shop/admin/salesStatis/get-sale-num-json.do",{order_status:status,cycle_type:cycle_type,year:year,month:month}, function(data) {
		var categories = [];
		for(var i in data.message) {
			categories.push(parseInt(i) + 1);
		}
		option.xAxis[0].data =  categories
		option.series[0].data = data.message;
 
        analyticChart.setOption(option);
		})
	
	
	if(cycle_type==1){	
		if(month==1){
			year = year-1;
			month = 12;
		}else{
			month = month-1;
		}
	}else{
		year = year-1;
	}
	jQuery.getJSON("${ctx}/shop/admin/salesStatis/get-sale-num-json.do",{order_status:status,cycle_type:cycle_type,year:year,month:month}, function(data) {  
		var categories = [];
		for(var i in data.message) {
			categories.push(parseInt(i) + 1);
		}
		option.xAxis[1].data =  categories
		option.series[1].data = data.message;
 
        analyticChart.setOption(option);
	});
	
}

//跳转下单金额
function saleMoney(){
	
	var year = $("#year :selected").val();
	var month = $("#month :selected").val();
	if(year==null){
		year=2015;
		month=4;
	}
	
	var status = $("#status :selected").val();
	var cycle_type = $("#cycle_type :selected").val();
	
	location.href = "${ctx}/shop/admin/salesStatis/order-statis.do?order_statis_type=1&year="+year+"&month="+month+"&cycle_type="+cycle_type+"&order_status="+status;

}

function numEcharts(obj){
	

option = {
			
		    title : {
		    	x:'center',
		        text: '订单销售量统计（'+obj+")"
		    },
		    tooltip : {
		        trigger: 'axis'
		    },
		    legend: {
					x:'center',y:'bottom',
		        data:['本'+obj,'上'+obj]
		    },
		    toolbox: {
		        show : true,
		        feature : {
		            mark : {show: true},
		            magicType : {show: true, type: ['line', 'bar']},
		            restore : {show: true},
		            saveAsImage : {show: true}
		        }
		    },
		    calculable : true,
			grid:{
				y2: 80
			},
		    xAxis : [
		        {
		        	boundaryGap: true,
		            type : 'category',
		            data : []
		        },
		        {
		        	boundaryGap: true,
		            type : 'category',
		            data : []
		        }
	],
		    yAxis : [
		        {
		        	boundaryGap: true,
		        	name:'数量（件）',
		        	type: 'value',
			    	axisLabel : {
		            formatter: '{value} (件)'
		        },
		        }
		    ],
		    series : [
		        {
		            name:'本'+obj,
		            type:'line',
		            data:[],
		            markLine : {
		                data : [
		                    {type : 'average', name: '平均值'}
		                ]
		            }
		        },
		        {
		            name:'上'+obj,
		            type:'line',
		            data:[],
		            markLine : {
		                data : [
		                    {type: 'average', name: '平均值'}
		                ]
		            }
		        }
		    ]
		};
	
	
	analyticChart.setOption(option);


	//restore
	analyticChart.on('restore', function(param){
	    divLegends.children('.legend').each(function(i, labelLegend){
	        $(labelLegend).removeClass('disabled');
	    });
	});

}

</script>

<#include '/admin/footer.html' >